<template>
    <div class="details">
        <!-- 顶部空间 -->
        <div class="topSpace">
            <!-- 文章信息 -->
            <div class="info">
                <!-- 文章标题 -->
                <div class="title">{{article.title}}</div>
                <!-- 发表和更新时间 -->
                <div class="time">
                    发表于 <span>{{article.createdYear}}-{{article.createdMonth}}-{{article.createdDay}}</span> | 更新于 <span>{{article.updatedYear}}-{{article.updatedMonth}}-{{article.updatedDay}}</span>
                </div>
                <!-- 统计 -->
                <div class="others">
                    字数总计：<span>{{article.word_count}}</span> | 
                    阅读时间：<span><{{Number((article.word_count/400).toFixed(0))+1}} 分钟</span> |
                    阅读量：<span>{{article.visits}}</span>
                </div>
            </div>
             <info-card :author="article.user" :authorId="article.user_id"></info-card>
        </div>

        <div class="container">
            <!-- 作者个人信息卡组件  要改动 -->
           
            <!-- 内容区域 -->
            <div class="content rounded">
                <!-- 文章内容 -->
                <mavon-editor class="mavon-editor" 
                v-model="article.markdown" 
                :boxShadow="false" 
                :subfield="false" 
                :editable="false" 
                :toolbarsFlag="false" 
                :defaultOpen="'preview'"/>
                <!-- 推荐文章 -->
                <ul class="recommend">
                    <div class="recomTitle">
                        <img src="@/assets/images/recommend_icon.png" height="24">相关推荐
                    </div>
                    <li v-for="(item, index) in recommends" :key="index">
                        <a @click="intoDetails(item)">{{item.title}}</a>
                        </li>
                </ul>
                <!-- 评论组件 -->
                <review :articleId="article.id"></review>
            </div>
        </div>
    </div>
</template>
<script>
import store from '@/store/index.js'
import InfoCard from '@/components/details/InfoCard'
import Review from '@/components/details/Review'
import Axios from 'axios'
import { getArticle,getArticles } from '@/../api/api.js'

export default {
    components: {
        InfoCard,
        Review,
    },
    data () {
        return {
            article: store.state.article.article,
            tag:"",
            recommends: []
        };
    },
    created() {
        if (!store.state.article.article) {
            Axios.get(getArticle,{
                params:{
                    id: this.$route.query.id
                }
            })
            .then(Response => {
                if (Response.data.message == 'success') {
                    this.article = Response.data.data.article;
                    this.tag = Response.data.data.article.tags.split("]")[0]+']';
                }
            })
            .catch(err => {
                console.log(err);
            })
        }
        else {
            Axios.get(getArticle,{
                params:{
                    id: this.$route.query.id,
                    visits:true
                }
            })
            .then(Response => {})
            .catch(err => {
                console.log(err);
            })
            this.tag = store.state.article.article.tags.split("]")[0]+']';
        }
    },
    methods: {
        intoDetails(article) {
            window.open("/details?id="+article.id, '_blank');
        }
    },
    watch: {
        tag(newValue,oldValue) {
            this.tag = newValue;
            Axios.get(getArticles,{
                params: {
                    tag: newValue
                }
            })
            .then(Response =>{
                if (Response.data.message == 'success') {
                    this.recommends = Response.data.data.rows;
                }
            })
            .catch(err => {
                console.log(err);
            });
        }
    }
}
</script>
<style lang='stylus' scoped>
// 通用标签样式
li
    list-style none

a 
    color #738598

// span
    // background-color #666
// 顶部空间样式
.topSpace
    height 200px
    background-color #5eb7b7
    position relative
    .info
        position absolute
        bottom 24px
        left 38px
        color #fff
        .title
            font-size 22px
            padding-bottom 6px
        .time
            padding-bottom 2px

// 文章内容及相关信息
.container
    width 82%
    margin 45px auto
    display flex
    // 内容样式
    .content
        flex 1
        margin-left 20px
        min-height 800px
        box-shadow 0 0 3px #ccc
        transition .3s
        &:hover
            box-shadow 0 0 20px #ccc
        article
            padding 12px
            min-height 200px
        // 推荐样式
        .recommend
            padding 20px
            img
                vertical-align middle
                margin-right 6px
            .recomTitle
                font-size 18px
                margin-bottom 6px
            li
                padding-left 32px
                font-size 14px
                margin-bottom 3px
                :hover
                    cursor pointer
.mavon-editor
    z-index 0
</style>